<template>
            <div style="position:relative;top:-30px;background-color: white;margin-top:50px;">
                <el-tabs  class="demo-tabs" v-model="currentTab" style="border:none">
                    <el-tab-pane disabled="true">
                        <template #label>
                        {{ router.currentRoute.value.query.projectName }}
                        </template>
                    </el-tab-pane>
                    
                    <el-tab-pane name="first"> 
                        <template #label >
                            <span class="custom-tabs-label">
                            <!-- <el-icon><calendar /></el-icon> -->
                            <span>需求</span>
                            </span>
                        </template>
                        <!-- 这里是内容 -->
                        <el-table v-loading="loading" :data="needDetail">
                            <el-table-column label="标题" prop="title" width="260" />
                            
                            <el-table-column label="状态">
                                    <template #default ="{ row }">
                                        <el-popover
                                            v-if="!['已实现', '已拒绝', '已解决'].includes(row.status)"
                                            placement="bottom"
                                            :width="200"
                                            trigger="click">
                                            <template #reference>
                                                <el-button v-if="row.status === '规划中'"
                                                    style="font-style:consolar;color:#67c23a;" type="success" plain  round class="custom-button" >
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '实现中'"
                                                    style="font-style:consolar;color:#79bbff;" type="primary" plain  round class="custom-button" >
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已实现'"
                                                    style="font-style:consolar;color:#43464b;" plain round class="custom-button1 custom-button"  >
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已拒绝'"
                                                    style="font-style:consolar;color:#f56c6c;" type="danger" plain  round class="custom-button" >
                                                    {{ row.status }}
                                                </el-button>
                                            </template>
                                            <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                                <el-button v-if="row.status === '规划中'" @click="changeStatus(row,'实现中',row.priority)">实现中</el-button>
                                                <el-button v-if="row.status === '规划中'" @click="changeStatus(row,'已实现',row.priority)">已实现</el-button>
                                                <el-button v-if="row.status === '规划中'" @click="changeStatus(row,'已拒绝',row.priority)">已拒绝</el-button>
                                                <el-button v-if="row.status === '实现中'" @click="changeStatus(row,'已实现',row.priority)">已实现</el-button>
                                                <el-button v-if="row.status === '实现中'" @click="changeStatus(row,'已拒绝',row.priority)">已拒绝</el-button>
                                            </div>
                                        </el-popover>
                                        <div v-else>
                                            <el-button v-if="row.status === '已实现'"
                                                style="font-style:consolar;color:#43464b;" plain round class="custom-button1 custom-button"
                                                @click="showFinalStateMessage('需求')">
                                                {{ row.status }}
                                            </el-button>
                                            <el-button v-if="row.status === '已拒绝'"
                                                style="font-style:consolar;color:#f56c6c;" type="danger" plain round class="custom-button"
                                                @click="showFinalStateMessage('需求')">
                                                {{ row.status }}
                                            </el-button>
                                        </div>
                                    </template>
                            </el-table-column>

                            <el-table-column label="优先级" width="120" >
                                <template #default ="{ row }">
                                    <el-popover
                                        placement="bottom"
                                        :width="200"
                                        trigger="click">
                                        <template #reference>
                                            <el-button style="width:4vw" text v-if="row.priority === ''">
                                                -
                                            </el-button>
                                            <el-button style="width:4vw" type="info" v-if="row.priority === 'Low'">
                                                {{ row.priority}}
                                            </el-button>
                                            <el-button style="width:4vw" type="success" v-if="row.priority === 'Middle'">
                                                {{ row.priority}}
                                            </el-button>
                                            <el-button style="width:4vw" type="danger" v-if="row.priority === 'High'">
                                                {{ row.priority}}
                                            </el-button>
                                        </template>
                                        <!-- // 这里是弹出框的内容 -->
                                        <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                                <el-button @click="changeStatus(row,row.status,'')">
                                                    空
                                                </el-button >
                                                <el-button @click="changeStatus(row,row.status,'Low')">
                                                    Low
                                                </el-button>
                                                <el-button @click="changeStatus(row,row.status,'Middle')">
                                                    Middle
                                                </el-button>
                                                <el-button @click="changeStatus(row,row.status,'High')">
                                                    High
                                                </el-button>
                                            </div>
                                    </el-popover>
                                </template>
                            </el-table-column>

                            <el-table-column label="预计结束"  width="160">
                                <template #default="{ row }">
                                    <div class="block">
                                        <el-date-picker
                                            style="width:140px"
                                            v-model="row.time"
                                            type="datetime"
                                            prefix-icon="none"
                                            placeholder="-"
                                            format="YYYY-MM-DD HH:mm"/>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="处理人"  >
                                <template #default="{ row }" >
                                    <svg style="position: relative;top: 5px;" t="1714220202901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="22" height="22"><path d="M512 51.2a460.8 460.8 0 1 1 0 921.6A460.8 460.8 0 0 1 512 51.2zM433.088 192.64c-3.712 0.192-8.896 0.448-13.632 1.728-11.904 3.072-15.104 10.624-16 14.784-1.344 7.104 1.088 12.544 2.688 16.128 0.256 0.512 0.512 1.152 0 2.88a54.272 54.272 0 0 1-11.2 11.456c-1.216 1.024-30.144 25.984-31.808 58.688a291.84 291.84 0 0 0 1.152 90.176c0.32 1.472 0.64 3.648 0 5.12-5.44 4.992-11.648 10.432-11.648 23.104 0.064 1.28 1.856 31.552 20.8 58.112 4.352 6.144 10.048 12.416 16.064 19.008 19.2 21.12 43.008 47.36 47.04 91.776 1.6 17.472 0.768 24 0.448 25.728l-0.64 1.28-0.384 1.344c0 0.128-3.648 9.408-44.544 19.84-23.68 6.08-46.912 9.152-47.616 9.28-30.208 5.12-55.68 14.144-75.904 26.88-15.808 9.6-29.056 22.912-38.72 38.656-14.528 24.256-14.08 46.272-13.888 50.304v14.4a12.16 12.16 0 0 0 12.352 12.032h568.768a12.16 12.16 0 0 0 12.352-12.032v-14.336a90.24 90.24 0 0 0-13.376-49.728 117.12 117.12 0 0 0-38.72-38.592c-20.16-12.8-45.824-22.016-76.928-27.712-0.256 0-23.296-3.072-46.912-9.088-41.088-10.496-44.672-19.776-44.8-19.84a11.904 11.904 0 0 0-0.96-2.688c-0.32-1.728-1.152-8.256 0.448-25.728 4.032-44.416 27.84-70.592 46.976-91.712 6.016-6.656 11.712-12.928 16.128-19.072 11.968-17.408 19.136-37.632 20.8-58.688a31.296 31.296 0 0 0-1.408-9.792 29.888 29.888 0 0 0-7.936-12.032l-1.728-1.92c-0.192-0.192-0.704-0.768-0.256-3.776 1.728-10.944 2.688-20.224 3.2-28.992a281.6 281.6 0 0 0-2.496-61.824 94.208 94.208 0 0 0-2.688-12.864 101.376 101.376 0 0 0-20.672-40.192l-1.28-1.28c-7.808-7.552-50.176-43.2-155.712-51.072a376.128 376.128 0 0 0-47.36 0.256z" p-id="7486" fill="#8a8a8a"></path></svg>
                                    <span v-for="handler in row.handlerArray" :key="handler.id">{{ handler.realName}};</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="创建时间" >
                                <template #default="{ row }">
                                    {{ dayjs(row.createdAt).format('YYYY-MM-DD')}}
                                </template>
                            </el-table-column>
                        </el-table> 
                    </el-tab-pane>
                    
                    <el-tab-pane label="缺陷" name="3">
                        <template #label >
                            <span class="custom-tabs-label">
                            <!-- <el-icon><calendar /></el-icon> -->
                            <span>缺陷</span>
                            </span>
                        </template>
                        <!-- 这里是内容 -->
                        <el-table v-loading="loading" :data="bugDetail">
                            <el-table-column label="标题" prop="title" width="260" />
                            
                            <el-table-column label="状态">
                                    <template #default ="{ row }">
                                        <el-popover
                                            v-if="!['已解决', '已拒绝'].includes(row.status)"
                                            placement="bottom"
                                            :width="200"
                                            trigger="click">
                                            <template #reference>
                                                <el-button v-if="row.status === '新'"
                                                    style="font-style:consolar;color:#67c23a;" type="success" plain  round class="custom-button" >
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '接受/处理'"
                                                    style="font-style:consolar;color:#79bbff;" type="success" plain  round class="custom-button" >
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已解决'"
                                                style="font-style:consolar;color:#43464b;"   round class="custom-button" >
                                                    {{ row.status }}
                                                </el-button>
                                                <el-button v-if="row.status === '已拒绝'"
                                                style="font-style:consolar;color:#f56c6c;" type="danger" plain  round class="custom-button" >
                                                    {{ row.status }}
                                                </el-button>
                                            </template>
                                            <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                                <el-button v-if="row.status === '新'" @click="changeBug(row,'接受/处理',row.priority)">接受/处理</el-button>
                                                <el-button v-if="row.status === '新'" @click="changeBug(row,'已解决',row.priority)">已解决</el-button>
                                                <el-button v-if="row.status === '新'" @click="changeBug(row,'已拒绝',row.priority)">已拒绝</el-button>
                                                <el-button v-if="row.status === '接受/处理'" @click="changeBug(row,'已解决',row.priority)">已解决</el-button>
                                                <el-button v-if="row.status === '接受/处理'" @click="changeBug(row,'已拒绝',row.priority)">已拒绝</el-button>
                                            </div>
                                        </el-popover>
                                        <div v-else>
                                            <el-button v-if="row.status === '已解决'"
                                                style="font-style:consolar;color:#43464b;" round class="custom-button"
                                                @click="showFinalStateMessage('缺陷')">
                                                {{ row.status }}
                                            </el-button>
                                            <el-button v-if="row.status === '已拒绝'"
                                                style="font-style:consolar;color:#f56c6c;" type="danger" plain round class="custom-button"
                                                @click="showFinalStateMessage('缺陷')">
                                                {{ row.status }}
                                            </el-button>
                                        </div>
                                    </template>
                            </el-table-column>

                            <el-table-column label="优先级" width="120" >
                                <template #default ="{ row }">
                                    <el-popover
                                        placement="bottom"
                                        :width="200"
                                        trigger="click">
                                        <template #reference>
                                            <el-button style="width:4vw" text v-if="row.priority === ''">
                                                -
                                            </el-button>
                                            <el-button style="width:4vw" type="info" v-if="row.priority === 'Low'">
                                                {{ row.priority}}
                                            </el-button>
                                            <el-button style="width:4vw" type="success" v-if="row.priority === 'Middle'">
                                                {{ row.priority}}
                                            </el-button>
                                            <el-button style="width:4vw" type="danger" v-if="row.priority === 'High'">
                                                {{ row.priority}}
                                            </el-button>
                                        </template>
                                        <!-- // 这里是弹出框的内容 -->
                                        <div class="pop-content" style="display: flex;flex-direction: column;align-items: center;">
                                                <el-button @click="changeBug(row,row.status,'')">
                                                    空
                                                </el-button >
                                                <el-button @click="changeBug(row,row.status,'Low')">
                                                    Low
                                                </el-button>
                                                <el-button @click="changeBug(row,row.status,'Middle')">
                                                    Middle
                                                </el-button>
                                                <el-button @click="changeBug(row,row.status,'High')">
                                                    High
                                                </el-button>
                                            </div>
                                    </el-popover>
                                </template>
                            </el-table-column>

                            <el-table-column label="预计结束"  width="160">
                                <template #default="{ row }">
                                    <div class="block">
                                        <el-date-picker
                                            style="width:140px"
                                            v-model="row.time"
                                            type="datetime"
                                            prefix-icon="none"
                                            placeholder="-"
                                            format="YYYY-MM-DD HH:mm"/>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column label="处理人"  >
                                <template #default="{ row }" >
                                    <svg style="position: relative;top: 5px;" t="1714220202901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7485" width="22" height="22"><path d="M512 51.2a460.8 460.8 0 1 1 0 921.6A460.8 460.8 0 0 1 512 51.2zM433.088 192.64c-3.712 0.192-8.896 0.448-13.632 1.728-11.904 3.072-15.104 10.624-16 14.784-1.344 7.104 1.088 12.544 2.688 16.128 0.256 0.512 0.512 1.152 0 2.88a54.272 54.272 0 0 1-11.2 11.456c-1.216 1.024-30.144 25.984-31.808 58.688a291.84 291.84 0 0 0 1.152 90.176c0.32 1.472 0.64 3.648 0 5.12-5.44 4.992-11.648 10.432-11.648 23.104 0.064 1.28 1.856 31.552 20.8 58.112 4.352 6.144 10.048 12.416 16.064 19.008 19.2 21.12 43.008 47.36 47.04 91.776 1.6 17.472 0.768 24 0.448 25.728l-0.64 1.28-0.384 1.344c0 0.128-3.648 9.408-44.544 19.84-23.68 6.08-46.912 9.152-47.616 9.28-30.208 5.12-55.68 14.144-75.904 26.88-15.808 9.6-29.056 22.912-38.72 38.656-14.528 24.256-14.08 46.272-13.888 50.304v14.4a12.16 12.16 0 0 0 12.352 12.032h568.768a12.16 12.16 0 0 0 12.352-12.032v-14.336a90.24 90.24 0 0 0-13.376-49.728 117.12 117.12 0 0 0-38.72-38.592c-20.16-12.8-45.824-22.016-76.928-27.712-0.256 0-23.296-3.072-46.912-9.088-41.088-10.496-44.672-19.776-44.8-19.84a11.904 11.904 0 0 0-0.96-2.688c-0.32-1.728-1.152-8.256 0.448-25.728 4.032-44.416 27.84-70.592 46.976-91.712 6.016-6.656 11.712-12.928 16.128-19.072 11.968-17.408 19.136-37.632 20.8-58.688a31.296 31.296 0 0 0-1.408-9.792 29.888 29.888 0 0 0-7.936-12.032l-1.728-1.92c-0.192-0.192-0.704-0.768-0.256-3.776 1.728-10.944 2.688-20.224 3.2-28.992a281.6 281.6 0 0 0-2.496-61.824 94.208 94.208 0 0 0-2.688-12.864 101.376 101.376 0 0 0-20.672-40.192l-1.28-1.28c-7.808-7.552-50.176-43.2-155.712-51.072a376.128 376.128 0 0 0-47.36 0.256z" p-id="7486" fill="#8a8a8a"></path></svg>
                                    <span v-for="handler in row.handlerArray" :key="handler.id">{{ handler.realName}};</span>
                                </template>
                            </el-table-column>

                            <el-table-column label="创建时间" >
                                <template #default="{ row }">
                                    {{ dayjs(row.createdAt).format('YYYY-MM-DD')}}
                                </template>
                            </el-table-column>
                        </el-table> 
                    </el-tab-pane>
                
                </el-tabs>
            </div>
</template>

<script setup>
    import { ElMessage } from 'element-plus'
    import { onMounted, ref, watch } from 'vue'
    import { GetProjectNeedList, GetProjectBugList, flowNeed, flowBug } from '@/api/project.js'
    import { useRouter, useRoute } from 'vue-router'
    import { dayjs } from 'element-plus'

    defineOptions({
        name: 'ProjectCollaboration'
    })

    const loading = ref(true)
    //全部路由器
    const router = useRouter()
    //当前路由的参数
    const route = useRoute()

    // 定义当前选中的标签页索引，默认选中需求标签页（索引为1）
    const currentTab = "first"

    onMounted(() => {
        getNeedDetail(route.query.id);
        getBugDetail(route.query.id);
    })

    //需求流转 改变状态
    const changeStatus = (row,STATE,priority) => {
        const status = 
            {
            needId:row.id,

            status:STATE,

            priority:priority,

            comment:'',

            handlerArray:row.handlerArray,

        }
        const res = flowNeed(status)
        res.then((res) => {
            console.log(res.data.data);
            if(res.data.code === 200){
                ElMessage({
                showClose: true,
                message: '需求已流转',
                type: 'success'
                }) 
                window.location.reload()
            }
        })
    }

    //缺陷流转 改变状态
    const changeBug = (row,STATE,priority) => {
        const status = 
            {
            bugId:row.id,

            status:STATE,

            priority:priority,

            comment:'',

            handlerArray:row.handlerArray,

        }
        const res = flowBug(status)
        res.then((res) => {
            console.log(res.data.data);
            if(res.data.code === 201){
                ElMessage({
                showClose: true,
                message: '缺陷已流转',
                type: 'success'
                }) 
                window.location.reload()
            }
        })
    }


    watch(() => route.query.id, () => {
        console.log('路由参数发生变化:', route.query.projectName);
        loading.value = true;
        if(route.query.id){
            getNeedDetail(route.query.id);
            getBugDetail(route.query.id);
        }
    });


    //发送需求详情请求
    const getNeedDetail = async (projectId) =>{
        const res = GetProjectNeedList(projectId);
        // console.log(res);

        res.then((res) => {
            needDetail.value = res.data.data
            console.log('dsadas',res.data);
        })
        loading.value = false;
    }
    
    //当前需求详情列表
    const needDetail = ref([
    ])


    //发送缺陷详情请求
    const getBugDetail = async (projectId) => {
    loading.value = true;
        try {
            const res = await GetProjectBugList(projectId);
            bugDetail.value = res.data.data;
            console.log('调用缺陷', res.data);
        } catch (error) {
            console.error(error);
        } finally {
            loading.value = false;
        }
    }
    //当前缺陷详情列表
    const bugDetail = ref([
    ])

    const showFinalStateMessage = (type) => {
        ElMessage({
            message: `${type}已完成`,
            type: 'success',
            duration: 2000
        })
    }

</script>

  
<style lang="scss" scoped>
    
    .el-header{
        display: flex;
        align-items: center;
        height: 50px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .el-main{
        height: calc(100vh - 100px);
    }
    .custom-button{
        background-color: transparent !important; /* 设置背景颜色为透明 */
    }
    .custom-button1:hover{
        border-color: #272c33;
    }

    .pop-content{
        > .el-button{
            margin: 4px 0;
        }
    }

    
    
</style>

<style lang="scss">
// 修改elementplus时间选择器图标占位符
    .el-input__prefix{
        width: 0px !important;
        height: 0px !important;
    }
    .el-input.el-input--prefix.el-input--suffix.el-date-editor.el-date-editor--datetime.el-tooltip__trigger.el-tooltip__trigger
    {
        
        border: none !important;;
    }
    .el-table_1_column_3.el-table__cell{
        width: 3vw;
    }

    // 修改整个表格边框
    .el-tabs__content{
        padding: 0px!important;
    }

    //修改tab下选择样式
    .el-tabs__nav-wrap:after{
        background-color: #e3dce100;
        border-bottom: 1px solid #ebeef5;
    }
    //修改tab下margin
    .el-tabs__header{
        margin-bottom: 2px;
    }

    // 取消时间显示边框 点击添加样式
    .el-table__body .el-input__wrapper{
        box-shadow: none ;
    }
    .el-table__body .el-input__wrapper.is-focus{
        box-shadow:0 0 0 1px var(--el-input-focus-border-color) inset
    }

    //tab修改悬浮图标
    .el-tabs__item.is-disabled {
        font-size: 20px;
        color: black;
        cursor: default;
    }

</style>